<template>
  <n-modal style="width: 600px;" v-model:show="curShow" preset="card"
           @after-enter="getInfo" @after-leave="resetInfo">
    <div style="display: flex;flex: 1;justify-content: center">
      <n-form ref="formRef" :model="form" :rules="rules" style="width: 450px;" :disabled="props.mode==='query'">
        <div style="display: flex;flex: 1;justify-content: space-between">
          <n-form-item label="标题" style="width: 75%;" path="title">
            <n-input v-model:value="form.title"></n-input>
          </n-form-item>
          <n-form-item label="发送类型" style="width: 20%;" required>
            <n-select :options="typeOptions" v-model:value="form.type" :disabled="props.mode==='update'||props.mode==='query'"></n-select>
          </n-form-item>
        </div>
        <n-form-item v-if="form.type==='私信'" label="私信用户名" required>
          <ReceiveUsernameSelect v-model:option="form.receiveUsername"
                                 :disabled="props.mode==='update'||props.mode==='query'"></ReceiveUsernameSelect>
        </n-form-item>
        <n-form-item label="内容" path="content">
          <n-input type="textarea" v-model:value="form.content" :maxlength="100" show-count
                   :autosize="{minRows:5}"></n-input>
        </n-form-item>
      </n-form>
    </div>
    <template #footer>
      <div>
        <slot name="tail"></slot>
      </div>
      <div style="text-align: center" v-if="props.mode==='create'||props.mode==='update'">
        <n-button style="width: 40%;margin: 5px" type="success" @click="confirm">确认</n-button>
        <n-button style="width: 40%;margin: 5px" type="error" @click="curShow=false"> 取消</n-button>
      </div>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";
import ReceiveUsernameSelect from "@/components/example/select/ReceiveUsernameSelect.vue";
import api from "@/api";

const props = defineProps({
  mode: { //create update query
    type: String,
    default: 'add'
  },
  data: {
    type: Object,
    default: {},
  },
  show: {
    type: Boolean,
    default: false
  }
})

const form = ref({
  title: '',
  content: '',
  receiveUsername: '',
  type: '',
})
const typeOptions = ref([
  {
    label: "通知",
    value: '通知',
  },
  {
    label: "私信",
    value: '私信',
  }])
const formRef = ref()
const rules = ref({
  title: [{
    required: true,
    message: '请输入标题',
    trigger: ['input']
  }],
  content: [{
    required: true,
    message: '请输入公告内容',
    trigger: ['input']
  }],
})

const confirm = () => {
  formRef.value.validate((error: any) => {
    if (!error) {
      if (props.mode === 'create') {
        api.notice.create({
          title: form.value.title,
          content: form.value.content,
          receiveUsername: form.value.receiveUsername && JSON.parse(form.value.receiveUsername).username
        }).then(res => {
          if (res && res.data.code === 0) {
            emits("onConfirm")
            window.$message.success(res.data.msg)
          }
        })
      } else if (props.mode === 'update') {
        api.notice.update({
          id: props.data.id,
          title: form.value.title,
          content: form.value.content,
        }).then(res => {
          if (res && res.data.code === 0) {
            window.$message.success(res.data.msg)
            emits("onConfirm")
          }
        })
      }
    }
  })

}

const getInfo = () => {
  if (props.mode === 'query' || props.mode === 'update') {
    form.value.title = props.data.title
    form.value.content = props.data.content
    form.value.type = props.data.receiveUsername ? '私信' : '通知'
    form.value.receiveUsername = JSON.stringify({username: props.data.receiveUsername})
  }
}
const resetInfo = () => {
  Object.keys(form.value).forEach(item => {
    //@ts-ignore
    form.value[item] = ''
  })
}
const emits = defineEmits(['update:show', 'onConfirm'])
const curShow = computed({
  get() {
    return props.show
  },
  set(val) {
    emits('update:show', val)
  }
})
</script>

<style scoped>

</style>